<template>
  <div class="cart_item">
    <div class="cart_column column_1">
      <el-checkbox class="my_el_checkbox" v-model="cart.is_selected"></el-checkbox>
    </div>
    <div class="cart_column column_2">
      <img :src="cart.course_img" alt="" style="object-fit:cover">
      <span><router-link :to="'/fighting/detail/'+cart.id +'/'">{{cart.name}}</router-link></span>
    </div>
    <div class="cart_column column_3">
      <el-select v-model="cart.expire_id" size="mini" placeholder="请选择购买有效期" class="my_el_select">
        <el-option :label="expire.expire_text" :value="expire.id" :key="expire.id"
                   v-for="(expire, index) in cart.expire_list"></el-option>
      </el-select>
    </div>
    <div class="cart_column column_4">¥{{cart.real_price}}</div>
    <div class="cart_column column_4" style="cursor: pointer" @click="delete_course">删除</div>
  </div>
</template>

<script>
    export default {
        name: "CartItem",
        data() {
            return {
                checked: false,
                expire: "1个月有效",
            }
        },
        props: ["cart",],
        watch: {
            // 监听课程勾选状态的切换
            "cart.is_selected": function () {
                // 检测到勾选状态有变化时执行 'change_course_selected' 方法
                this.change_course_selected();
            },

            // 监听有效期的切换
            'cart.expire_id': function () {
                this.change_expire();
            }
        },
        methods: {
            check_user_login() {
                let token = sessionStorage.user_token || localStorage.user_token;

                if (!token) {
                    this.$confirm('您尚未登录，请先登录官网！', '路飞学城官网温馨提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        this.$router.push('/login/');
                    });

                    return false;
                }
                return token
            },

            // 勾选状态切换
            change_course_selected() {
                let token = this.check_user_login();
                this.$axios.patch(`${this.$settings.Host}/cart/`, {
                    is_selected: this.cart.is_selected,
                    course_id: this.cart.id,
                }, {
                    headers: {
                        'Authorization': 'jwt ' + token,
                    }
                })
                    .then((res) => {
                        this.$message.success(res.data.msg);
                        this.$emit('change_expire_handler');
                    })
                    .catch((error) => {
                        this.$message.error(error.response);
                    })
            },

            // 切换有效期
            change_expire() {
                let token = this.check_user_login();
                this.$axios.put(`${this.$settings.Host}/cart/`, {
                    expire_id: this.cart.expire_id,
                    course_id: this.cart.id,
                }, {
                    headers: {
                        "Authorization": "jwt " + token,
                    }
                })
                    .then((res) => {
                        this.$message.success(res.data.msg);
                        this.cart.real_price = res.data.real_price;

                        this.$emit('change_expire_handler');
                    })
                    .catch((error) => {
                        this.$message.error(error.response);
                    })
            },

            // 删除课程
            delete_course() {
                let token = this.check_user_login();
                this.$axios.delete(`${this.$settings.Host}/cart/?course_id=${this.cart.id}`, {
                    headers: {
                        "Authorization": "jwt " + token,
                    }
                })
                    .then((res) => {
                        this.$message.success(res.data.msg);
                        this.$emit('del_course');
                        let cart_len = res.data.course_num;
                        // 通过 commit 来触发 store/index.js 中的
                        // mutations 下的 add_cart 方法对 vuex 中
                        // 存储的预购课中的课程数量进行更新
                        // （更新 state下cart中的cart_length）
                        this.$store.commit('add_cart', cart_len);
                    })
                    .catch((error) => {
                        this.$message.error(error.response.msg);
                    })
            },
        }
    }
</script>

<style scoped>
  .cart_item::after {
    content: "";
    display: block;
    clear: both;
  }

  .cart_column {
    float: left;
    height: 150px;
    display: flex;
    align-items: center;
  }

  .cart_item .column_1 {
    padding-left: 116px;
    position: relative;
  }

  .my_el_checkbox {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    margin: auto;
    width: 16px;
    height: 16px;
  }

  .cart_item .column_2 {
    width: 455px;
  }

  .cart_item .column_2 img {
    width: 170px;
    height: 85.4px;
    margin-right: 35px;
    vertical-align: middle;
  }

  .cart_item .column_3 {
    width: 150px;
    position: relative;
    padding-left: 55px;
  }

  .my_el_select {
    width: 117px;
    height: 28px;
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
  }

  .cart_item .column_4 {
    width: 110px;
    padding-left: 78px;
  }

</style>
